{% extends "template.html" %}

{% block left %}
{% block js %}
<script type="text/javascript">
    $(document).ready(function() {
        $("form#login").validate();
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("form#register").validate();
    });
</script>
{% endblock js %}

<h4><a href="#">Login</a></h4>
{% if user.loggedIn %}
{% else %}
<form id="login" action="{% url Login %}" enctype="multipart/form-data" method="post">
    <div><label>Username or Phone No:</label></div>
    <div><input type="text" name="username"  class="required"/></div>
    <div><label>Password:</label></div>
    <div><input type="password" name="password" class="required"/></div>
    <br/>
    <div><input type="submit" value="Login" /></div>
</form>

<br/>
<br/>
<strong>Create account for free</strong><br/>


    <form id="register" action="{% url Register %}" enctype="multipart/form-data" method="post">
            <div><label>Username:</label></div>
            <div><input type="text" name="username" minlength="4" class="required"/></div>
            <div><label>Mobile Phone No:</label></div>
            <div><input type="text" name="phoneNo"  class="required"/></div>
            <div><label>Password:</label></div>
            <div><input type="password" name="password"  minlength="6"   class="required"/></div>
            <div><label> Confirm Password:  </label></div>
            <div><input name="password2" type="password" minlength="6" class="required" /></div>
            <div><label>Select One</label></div>
            <div><select name="role" class="required">
                    <option value="">SELECT</option>
                    <option value="TENANT">Tenant</option>
                    <option value="LANDLORD">Landlord</option>
                </select>
            </div>
<br/>
            <div><input type="submit" value="Register" /></div>
    </form>


{% endif %}

{% endblock left %}